import React from "react";
import {List, Checkbox} from "antd";
import './index.scss'
import CardItemDescribe from "@/pages/radar/Events/DataView/cardview/CardItemDescribe";
import EventsStore from "@/pages/radar/store/EventsStore";
import {observer} from "mobx-react";

const CheckboxGroup = Checkbox.Group;

interface CardListProps {
  editable: boolean;
}

class CardList extends React.Component<CardListProps> {

  constructor(props: CardListProps) {
    super(props);
    this.state = {};
    this.renderItem = this.renderItem.bind(this);
  }

  renderItem(item: any, index: number) {
    return (
      <List.Item
        key={item.id}
        className={"listItem " + (item.readFlg?.code === "read" ? "read" : "")}
      >
        <CardItemDescribe item={item} editable={this.props.editable}/>
      </List.Item>
    );
  }

  render() {
    return (
      <CheckboxGroup
        style={{width: "100%"}}
        // value={eventsStore.selectedRowKeys}
        // onChange={eventsStore.toggleEventSelect}
      >
        <List
          grid={{
            gutter: 16,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 6,
          }}
          className="cardList"
          dataSource={EventsStore.pageResponse.data}
          pagination={{
            total: EventsStore.pageResponse.pageInfo.total,
            current: EventsStore.pageResponse.pageInfo.page,
            pageSize: EventsStore.pageResponse.pageInfo.size,
            // onChange: eventsStore.onPageSizeChange,
            hideOnSinglePage: true,
            showSizeChanger: true,
            pageSizeOptions: ["12", "24", "36", "48", "60"],
            showQuickJumper: true,
          }}
          renderItem={this.renderItem}
        />
      </CheckboxGroup>
    );
  }
}

export default observer(CardList)
